<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        列表渲染：
        v-for指令：
            1.用于展示列表数据
            2.语法：v-for="(item, index) in arr" :key="xxx"
            3.可遍历：数组、对象、字符串（用得少）、指定次数（用的非常少）
            
     -->
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 数组遍历 -->
        <h2>人员列表</h2>
        <ul>
            <!-- for in行  for of报错 -->
            <li v-for="(p, index) in persons" :key="index">
                {{p.name}} - {{p.age}}
            </li>
        </ul>

        <!-- 对象遍历 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(val, k) of car" :key="k">
                {{k}} - {{val}}
            </li>
        </ul>

        <!-- 字符串遍历 -->
        <h2>字符串测试（用得少）</h2>
        <ul>
            <li v-for="(val, k) of str" :key="k">
                {{k}} - {{val}}
            </li>
        </ul>

        <!-- 索引遍历 -->
        <h2>索引测试（用得非常少）</h2>
        <ul>
            <li v-for="(val, k) of 5" :key="k">
                {{k}} - {{val}}
            </li>
        </ul>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false;   // 阻止vue 在启动时生成生产提示

    new Vue({
        el: "#root",
        data: {
            persons: [
                {
                    id: 1,
                    name: "张三",
                    age: 18
                },
                {
                    id: 2,
                    name: "李四",
                    age: 18
                },
                {
                    id: 3,
                    name: "王五",
                    age: 18
                }
            ],
            car: {
                name: '奥迪A8',
                price: '70万',
                color: "黑色"
            },
            str: "Hello"
        }
    })
</script>
</html>